<!--
 * @Descripttion:
 * @version:
 * @Author: sueRimn
 * @Date: 2020-10-29 15:34:42
 * @LastEditors: sueRimn
 * @LastEditTime: 2020-11-04 10:23:31
-->
<template>
  <div class="questionBox">
    <div class="selectTitle">
      <el-radio-group v-model="bankType" @change="get_AdminQuestionList">
        <el-radio-button label="我的题库" />
        <el-radio-button label="学校题库" />
        <el-radio-button label="系统题库" />
      </el-radio-group>
    </div>
    <div v-for="(item,index) in list" :key="index">
      <div style="display:flex" class="vhtmlImg">
        <div>{{ item.question_title | dataFormat }}</div>
      </div>
      <div class="btnGround">
        <el-link type="primary" style="margin-right: 20px;" @click="lookItem(item)">查看</el-link>
        <el-link type="primary" @click="add(item)">加入</el-link>
      </div>
      <el-divider />
    </div>
    <div class="pagination">
      <el-pagination
        small
        layout="prev, pager, next"
        :total="total"
        :page-size="limit"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 查看详情 -->
    <el-dialog
      title="查看详情"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <div class="bank_question_title">
        {{ lookItemData.question_title | dataFormat }}
      </div>
      <div v-for="(item,index) in lookItemData.answer_list" :key="index" class="question_item">
        {{ item.answer | dataFormat }}
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getAdminQuestionList } from '@/api/adminQuestionList'
function nbsp2Space(str) { //  转成空格
    var arrEntities = { 'nbsp': ' ' }
    return str.replace(/&(nbsp);/ig, function(all, t) { return arrEntities[t] })
}
function removeHtmlTab(tab) {
    return tab.replace(/<[^<>]+?>/g, '')// 删除所有HTML标签
}
export default {
    filters: {
        dataFormat(msg) {
            return nbsp2Space(removeHtmlTab(msg))
        }
    },
    props: {
        questionType: { // 题目类型 1单选，2多选，4填空
            type: Number,
            default: 1
        }
    },
    data() {
        return {
            bankType: '我的题库', // 题库类型
            page: 1, // 页数
            limit: 5, // 限制
            total: 0, // 总数
            list: [], // 题库数据
            dialogVisible: false,
            lookItemData: {
                question_title: '',
                answer_list: []
            }
        }
    },
    watch: {
        questionType: {
            handler: function() {
                this.get_AdminQuestionList()
            },
            immediate: true
        }
    },
    //   created() {
    //     this.get_AdminQuestionList()
    //   },
    methods: {
    // 获取数据
        get_AdminQuestionList() {
            var data = {
                question_typeid: this.questionType,
                page: this.page,
                pagesize: this.limit,
                is_get_answer: 2,
                parent_id: this.$store.getters.institute_id
            }
            if (this.bankType === '我的题库') {
                data.lists_type = 2
            } else if (this.bankType === '学校题库') {
                data.school_lists_type = 1
            } else if (this.bankType === '系统题库') {
                data.lists_type = 1
            }
            getAdminQuestionList(data).then(res => {
                this.total = res.data.total
                this.list = res.data.data
                console.log('题库', res)
            })
        },
        lookItem(item) {
            console.log(item)
            this.lookItemData = item
            this.dialogVisible = true
        },
        handleCurrentChange(val) {
            this.page = val
            this.get_AdminQuestionList()
        },
        handleClose(done) {
            done()
        },
        // 加入
        add(item) {
            this.$emit('addQuestion', {
                item,
                questionType: this.questionType
            })
        }

    }
}
</script>

<style scoped lang='scss'>
    .selectTitle {
        margin-bottom: 40px;
    }

    .questionBox {
        width: 387px;
        background: #f5f7fa;
        padding: 20px;
        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
        border-radius: 4px;
        box-sizing: border-box;
    }

    .btnGround {
        width: 100%;
        text-align: right;
    }

    .pagination {
        width: 100%;
        text-align: center;
    }

    .question_item {
        margin-top: 20px;
        margin-left: 10px;
    }

    .bank_question_title {
        font-size: 17px;
        font-weight: bold;
    }

</style>
